<template>
	<z-paging ref="paging" v-model="list" @query="getList">
		<view class="d-p-l-30 d-p-r-30">
			<view v-for="(item, index) in list" :key="index">
				<view
					class="d-m-t-20 d-flex d-col-top"
					:class="{
						'd-filter': item.expired === 1
					}"
				>
					<u-image :src="item.goods_image" width="290rpx" height="184rpx" radius="10rpx"></u-image>
					<view class="d-m-l-20 d-flex-1 reav" style="height: 184rpx;">
						<view class="d-font-30 u-line-1">{{ item.goods_name }}</view>
						<view class="d-flex d-m-t-5">
							<u-image src="/static/shop.png" width="30rpx" height="30rpx"></u-image>
							<view class="d-font-26 d-m-l-10">{{ item.venue_name }}</view>
						</view>
						<view class="d-font-24 d-be d-m-t-5">有效期：{{ item.yxq }}</view>
						<view class="d-font-24 d-be d-m-t-5">剩余：{{ item.else_text }}</view>
						<view class="d-font-24 d-red d-m-t-5">{{ item.tip }}</view>
						<!-- @click="item.show = !item.show" -->
						<view v-if="item.expired !== 1" class="qed" ><u-image src="/static/qd.png" width="50rpx" height="50rpx"></u-image></view>
					</view>
				</view>

				<view v-if="item.show">
					<view class="qline">
						<view class="l1"></view>
						<view class="l1 l2"></view>
					</view>
					<view class="d-p-t-60">
						<view class="d-qrd">
							<view class="qcard">
								<view class="q1"></view>
								<view class="q1 q2"></view>
							</view>
							<view class="d-text-center d-p-t-60 d-main">使用时请出示此二维码</view>
							<view class="d-flex d-row-center d-m-t-15">
								<!-- <u-image :src="$demo" width="370rpx" height="370rpx"></u-image> -->
								<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="185" :value="item.cardno" :options="{ margin: 10 }"></uqrcode>
							</view>
							<view class="d-main d-font-32 d-text-center d-m-t-30">{{ item.cardno }}</view>
							<view class="d-text-center d-99 d-font-22">（自助终端、前台、闸机、更衣室均可使用）</view>
							<view class="d-flex d-row-center d-p-t-20"><u-icon @click="item.show = !item.show" name="arrow-up" size="28rpx" color="#59A0FF"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { getMyCard } from '@/common/api';
export default {
	data() {
		return {
			list: []
		};
	},
	onBackPress() {
		uni.$u.route({
			url: '/pages/mine/mine',
			type: 'switchTab'
		});
		return true;
	},
	methods: {
		getList(page, limit) {
			getMyCard({
				page,
				limit
			})
				.then(res => {
					let list = res.data.map(item => {
						item.show = false;
						return item;
					});
					this.$refs.paging.complete(list);
				})
				.catch(err => {
					this.$refs.paging.complete(false);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.d-list-box {
	box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
	background: #ffffff;
	border-radius: 10rpx;
}
.d-tag {
	background: #f3f3f3;
	border-radius: 4rpx;
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding: 0 18rpx;
}
.d-be {
	color: #bebebe;
}
.d-red {
	color: #ff4105;
}
.d-bold {
	font-weight: bold;
}

.reav {
	position: relative;
	.qed {
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
	}
}

.qline {
	position: relative;
	.l1 {
		width: 20rpx;
		height: 60rpx;
		background: #dce0fd;
		border-radius: 10rpx;
		position: absolute;
		left: 130rpx;
		bottom: -60rpx;
	}
	.l2 {
		left: auto;
		right: 130rpx;
	}
}

.d-qrd {
	width: 626rpx;
	min-height: 660rpx;
	background: #ffffff;
	box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
	border-radius: 10rpx;
	margin: -22rpx auto 0;
}

.qcard {
	position: relative;
	.q1 {
		width: 22rpx;
		height: 22rpx;
		background: #ffffff;
		border: 4rpx solid #575c86;
		border-radius: 50%;
		box-sizing: border-box;
		position: absolute;
		left: 99rpx;
	}
	.q2 {
		left: auto;
		right: 99rpx;
	}
}
.d-main {
	color: #59a0ff;
}
.d-99 {
	color: #999;
}

.d-filter {
	// filter: grayscale(100%);
}
</style>
